<template>
  <div class="box1">
    
  </div>
  <div class="box2">
    <p class="he">介绍（已升级 element-plus 正式版）</p>
    <img src="../../assets/logo-small@2x.png" alt="" class="img2" />
    <p class="supe">super-admin</p>
    <p class="ch">超级管理员</p>
    <el-icon class="chat"><ChatLineSquare /></el-icon>
    <div class="xiang"><span>项目介绍</span></div>
    <p class="p1">
      《vue3 改写 vue-element-admin，实现 <br />
      后台前端综合解决方案》项目演示
    </p>
    <el-icon class="pointer"><Pointer /></el-icon>
    <div class="xiang"><span>项目功能</span></div>
    <div class="box4">
        <div class="qu">vue3全家桶</div>
    <el-progress :percentage="100" status="success" />
    <div class="qu">Element-Plus</div>
    <el-progress :percentage="100" status="success" />
    <div class="qu">vue-element-admin</div>
    <el-progress :percentage="100" status="success" />
     <div class="qu">ESLint + Git Hooks</div>
    <el-progress :percentage="100" status="success" />
     <div class="qu">架构设计</div>
   <el-progress :percentage="100" status="success" />
   <div class="qu">权限验证（页面权限、功能权限、动态权限、权限配置）</div>
   <el-progress :percentage="100" status="success" />
   <div class="qu">功能引导</div>
   <el-progress :percentage="100" status="success" />
   <div class="qu">可配置 + 收缩侧边栏</div>
   <el-progress :percentage="100" status="success" />
   <div class="qu">动态面包屑</div>
   <el-progress :percentage="100" status="success" />
   <div class="qu">Tags View</div>
   <el-progress :percentage="100" status="success" />
   <div class="qu">svg sprite 图标</div>
   <el-progress :percentage="100" status="success" />
   <div class="qu">国际化</div>
   <el-progress :percentage="100" status="success" />
   <div class="qu">动态换肤</div>
   <el-progress :percentage="100" status="success" />
    <div class="qu">页面搜索</div>
   <el-progress :percentage="100" status="success" />
    <div class="qu">excel 导出、导入</div>
   <el-progress :percentage="100" status="success" />
    </div>
  </div>
  <div class="box3">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">功能</el-menu-item>
      <el-menu-item index="2">章节</el-menu-item>
      <el-menu-item index="3">作者</el-menu-item>
    </el-menu>
  </div>
</template>
<script setup>
import { UserFilled, ChatLineSquare, Pointer } from "@element-plus/icons-vue";

</script>
<style lang="scss">


.box2 {
  width: 28%;
  height: 1300px;
  background: #ffffff;
  float: left;
  margin-top: 20px;
  border-radius: 20px;
  box-shadow: 0 0 8px #ccc;
}
.box3 {
  width: 68%;
  height: 98%;
  background: #ffffff;
  float: left;
  margin-left: 25px;
  margin-top: 20px;
  box-shadow: 0 0 8px #ccc;
  border-radius: 20px;
}
.he {
  font-size: 20px;
  margin-top: 20px;
}
.img2 {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-top: 50px;
}
.supe {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
}
.ch {
  font-size: 18px;
  margin-top: 9px;
}
.xiang {
  font-weight: 700;
  font-size: 20px;
  padding-top: 50px;
  float: left;
}
.chat {
  font-size: 40px;
  margin-top: 40px;
  float: left;
  margin-left: 10px;
}
.p1 {
  margin-top: 90px;
  font-size: 18px;
}
.pointer {
  font-size: 40px;
  margin-top: 40px;
  float: left;
  margin-left: 10px;
}
.el-menu-item {
  font-size: 18px;
}
.box4 {
  margin-top: 90px;
}
.qu {
  font-size: 18px;
  margin-bottom: 2px;
  box-sizing: inherit;
  margin-left: 10px;
  margin: 10px;
}
.el-progress {
  stroke-width: 4;
}
</style>